*{
    margin: 0;
    padding: 0;
}

img{
    width: 100%;
    vertical-align: middle;
}

a{
    text-decoration: none;
    color: inherit;
    -webkit-tap-highlight-color: transparent;
}

html{
    /* 做vw适配 */
    font-size: calc(100vw / 414);
}

body{
    background: linear-gradient(#FFFFFF 0% , #F4F5F9 78%);
    /*background: linear-gradient( #F00 0% , #0f0 78%);*/
    padding-bottom: 100rem;
}

.menu{
    width: 414rem;
    height: 66rem;
    background-color: #fff;
    position: fixed;
    bottom: 0;
    z-index: 9999;
}

.menu ul{
    list-style: none;
    display: flex;
    justify-content: space-around;
}

.menu li{
    flex: auto;
    display: flex;
    height: 66rem;
}

.menu li a{
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    color: #868889;
    font-size: 22rem;
}
.menu li a.active{
    color: #040404;
}

.menu .shopping-cart::before{
    content: "";
    position: absolute;
    background-color: #fff;
    width: 64rem;
    height: 64rem;
    border-radius:50% ;
    bottom: 23rem;
    right: 31rem;
}

.menu .shopping-cart a{
    position: absolute;
    width: 56rem;
    height: 56rem;
    background-color: #6CC51D;
    border-radius: 50%;
    color: #fff;
    bottom: 26rem;
    right: 35rem;
}




.search-form{
    width: 380rem;
    height: 50rem;
    margin: 14rem auto 10rem;
    position: relative;
}

.search-form input{
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    background-color: #F4F5F9 ;
    color: #868889;
    font-size: 15rem;
    line-height: 18rem;
    border: none;
    border-radius: 5rem;
    padding-left: 60rem;
}

.search-form i{
    position: absolute;
    font-size: 19rem;
    top: 15rem;
    color: #868889;
}

.search-form .fa-search{
    left: 21rem;
}

.search-form .fa-sliders{
    right: 28rem;
}

.page-hero{
    position: relative;
    width: 380rem;
    height: 283rem;
    margin: 0 auto;
    background-color: #bfa;
}

.page-hero .img-list li{
    list-style: none;
    position: absolute;
    width: 100%;
}

.page-hero .img-list h2{
    position: absolute;
    width: 160rem;
    height: 54rem;
    font-size: 18rem;
    top: 151rem;
    left: 44rem;
}

.pointer{
    position: absolute;
    display: flex;
    left: 16rem;
    bottom: 30rem;
}

.pointer a{
    width: 6rem;
    height: 6rem;
    background-color: #fff;
    border-radius: 50%;
    margin-right: 7rem;
    z-index: 999;
}

.pointer .active{
    width: 24rem;
    background-color: #6CC51D;
    border-radius: 100rem;
}

.cate-list{
    width: 380rem;
    margin: 20rem auto;
}

.cate-list header,
.featured-products header
{
    display: flex;
    justify-content: space-between;
}

.cate-list h3 ,
.featured-products h3
{
    font-size: 18rem;
    line-height: 21rem;
}

.cate-list .fa-angle-right,
.featured-products .fa-angle-right
{
    font-size: 18rem;
    color: #868889;
}

.cate-inner{
    width: 100%;
    list-style: none;
    display: flex;
    margin-top: 17rem;
    overflow: auto;
}

.cate-inner li{
    font-size: 18rem;
    margin-right: 21rem;
}

.cate-inner li a{
    display: flex;
    flex-flow: column;
    align-items: center;
}

.cate-inner .cate-icon{
    display: flex;
    width: 52rem;
    height: 52rem;
    font-size: 25rem;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    color: orange;
    background-color: #E6F2EA;
}

.cate-inner .cate-text{
    font-size: 10rem;
    color: #868889;
    margin: 12rem 0;
}


.cate-inner li:nth-child(2) .cate-icon{
    color: #F8644A;
    background: #FFE9E5;
}

.cate-inner li:nth-child(3) .cate-icon{
    color: #F5BA3C;
    background: #FFF6E3;
}

.cate-inner li:nth-child(4) .cate-icon{
    color: #AE80FF;
    background: #F3EFFA;
}

.cate-inner li:nth-child(5) .cate-icon{
    color: #0CD4DC;
    background: #DCF4F5;
}

.cate-inner li:nth-child(6) .cate-icon{
    color: #FF7EB6;
    background: #FFE8F2;
}

.cate-inner li:nth-child(7) .cate-icon{
    color: #F8644A;
    background: #FFE9E5;
}

.cate-inner li:nth-child(8) .cate-icon{
    color: #F8644A;
    background: #FFE9E5;
}

.featured-products{
    width: 380rem;
    margin: 0 auto;
}

.products{
    list-style: none;
    display: flex;
    flex-flow: wrap;
    justify-content: space-between;
}

.products li{
    width: 181rem;
    height: 234rem;
    background-color: #fff;
    margin-top: 20rem;
}

.products-info{
    position: relative;
}

.products-info .fa-heart{
    position: absolute;
    font-size: 14rem;
    color: #868889;
    top: 10rem;
    right: 9rem;

}

.products-info .fa-heart.fa-solid{
    color: #FE585A;
}

.products-info .product-bg{
    position: absolute;
    width: 84rem;
    height: 84rem;
    border-radius: 50%;
    background: #FFE6C2;
    top: 21rem;
    left: 0;
    right: 0;
    margin: 0 auto;
}

.products-info a{
    display: flex;
    box-sizing: border-box;
    flex-flow: column;
    height: 193rem;
    padding-top: 43rem;
    align-items: center;
}

.products-info .price{
    font-size: 12rem;
    color: #6CC51D;
    font-weight: bold;
    margin-top: 8rem;
}
.products-info .title{
    font-size: 15rem;
    font-weight: bold;
    color: #000000;
    line-height: 26rem;
}
.products-info .unit{
    font-size: 10rem;
    color: #868889;
}

.products-info img{
    position: relative;
    width: 91rem;
    z-index: 99;
}

.add-cart, .add-product{
    height: 41rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border-top: 1px #EBEBEB solid;
    font-size: 12rem;
    color: #010101;
    font-weight: bold;
}

.add-cart i, .add-product i{
    height: 15rem;
    color: #6CC51D;;
}
.add-cart i{
    margin-right: 9rem;
}


.add-product{
    justify-content: space-around;
}